<template>

    <div v-text="name"></div>

    <button :disabled="flag" v-on:click="changeName"> 修改</button>

    <div>
        <div>张三</div>
        <h1 class="title">标题</h1>
    </div>
    <!-- 
        let vDom = {
            tag :"div",
            children:[
                {
                    tag:"div",
                    text:"张三"
                },
                {
                    tag:"h1",
                    attrs:{
                        class:"title"
                    },
                    text:"标题"
                }
            ]
        }
     -->

     <div>{{ obj.name }}</div>
</template>

<script setup>
    import {ref,reactive,nextTick} from 'vue'
    let name = ref("河北经贸大学")
    // 基于Proxy代理来实现
    // vue的数据绑定，虚拟DOM和DIFF算法
    function changeName(){
        name.value += 1
        debugger
        nextTick(()=>{
            debugger
        })
    }

    // let obj = {
    //     name:"张三",
    //     age:18
    // }

    let obj = reactive({
        name:"张三",
        age:18
    })
    console.log(obj);
    console.log(obj.name);
    
    
</script>

<style>

</style>